<template>
    <div class="native-video-container">
        <video v-if="postfix === 'mp4' || postfix === 'mov'" id="shipin" :controls="controls" :autoplay="autoplay" :preload="preload" :width="width" :height="height" :src="playParam.play_url" oncontextmenu="return false;" disablePictureInPicture controlslist="nodownload">
        </video>
        <div v-else class="rewview-tips">
            <div class="tip-mask">
                <span>当前视频格式是：{{ postfix }}，不支持预览;</span>
                <span>提示：仅支持mp4和mov格式视频预览.</span>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            playParam: {
                type: Object,
                default () {
                    return {};
                },
                require:true
            },
            controls: {
                type: Boolean,
                default: true
            },
            autoplay: {
                type: Boolean,
                default: true
            },
            preload: {
                type: String,
                default: "auto"
            },
            width: {
                type: String,
                default: "100%"
            },
            height: {
                type: String,
                default: "100%"
            }
        },
        data() {
            return {
            };
        },
        mounted() {
            document.getElementById("shipin").volume = 0.5;
        },
        computed:{
            postfix(){
                if(this.playParam){
                    const arr = this.playParam.play_url.split('.');
                    return arr[arr.length -1].toLowerCase()
                }
            }
        },
        beforeDestroy() {},
        methods: {}
    }

</script>

<style lang="scss">
.native-video-container{
    height: 100%;
    video {
        // object-fit: fill;
        outline: none;
    }
    
    video::-internal-media-controls-download-button {
        display: none;
    }
    
    video::-webkit-media-controls {
        overflow: hidden !important;
    }
    
    video::-webkit-media-controls-enclosure {
        margin-left: auto;
    }
    
    .rewview-tips {
        display: inline-block;
        height: 100%;
        width: 100%;
        background-image: url('../../../public/images/image08.png');
        background-size: 100% 100%;
        text-align: center;
        .tip-mask{
            display: inline-block;
            width: 270px;
            height: 50px;
            line-height: 18px;
            background: rgba(0, 0, 0, 0.1);
            text-align: center;
            border-radius: 8px;
            padding: 10px;
            span{
                font-weight: 600;
                color: #fff;
            }
            span:first-child{
                display: block;
                font-size: 16px;
                line-height: 30px;
            }
            span:last-child{
                color: #ccc;
            }
        }
    }
}
</style>